#web components
#web components

The Web Component Success Story | jakelazaroff.com

Web components can make the entire web more accessible and unify fragmented communities

Web components and JavaScript frameworks are complementary technologies [ more ]

LogRocket Blog

Web development

Build an off-canvas menu with and web components - LogRocket Blog

Off-canvas menus are a common pattern in web design, often seen on mobile websites

Creating an accessible off-canvas menu involves considering factors such as ARIA attributes and focus trapping [ more ]

Piccalilli

Web development

Front-End solution: progress indicator

Creating a web component for a loading statement with appropriate ARIA attributes.

How to construct a ProgressIndicator class in JavaScript for progressive enhancement. [ more ]

LogRocket Blog

Web Components adoption guide: Overview, examples, and alternatives - LogRocket Blog

Web Components allow developers to create reusable custom elements using modern web standards. [ more ]

Naildrivin' 5 - Website of David Bryant Copeland

Web Components in Earnest

Building Ghola, a palette generator for developers, using custom elements resulted in a fast and fun project with almost no dependencies.

Using the custom elements API was effective in simplifying the code and allowing for flexibility in enhancing elements. [ more ]

Zach Leatherman

The Good, The Bad, The Web Components-zachleat.com

Web Components are widely used in modern web development, including in popular component libraries like Vercel.js.

Custom Elements allow attaching JavaScript classes to custom elements for added behaviors and content in web development. [ more ]

Frontendmasters

A Modest Web Components Styling Proposal: An "I Know What I'm Doing" Selector

Using a pseudo selector to break through the Shadow DOM and style inside it could be a solution for better styling of Web Components.

The current styling options for Shadow DOM Web Components are limited and not ideal. [ more ]

Southleft, LLC

Taming the Shadow DOM: Injecting Global Styles with Adopted Stylesheets | Southleft, LLC

Shadow DOM provides style encapsulation for web components.

Adopted stylesheets enable efficient sharing of styles between Shadow DOM and global styles. [ more ]

moreshadow-dom

Mux

2 weeks ago

Facebook just updated its relationship status with web components | Mux

React 19 (beta) now has full support for web components, a significant development for those interested in this technology. [ more ]

DEV Community

3 weeks ago

SPA-Like Navigation Preserving Web Component State

Implement Diff DOM Streaming in web browsing using VanillaJS and Bun for state retention in web components. [ more ]

DEV Community

1 month ago

HTML Streaming Over the Wire : A Deep Dive

HTML Streaming Over the Wire provides a fundamental restoration of web principles using the Diff DOM Algorithm.

The diff-dom-streaming library facilitates building SPAs with minimal client-side JavaScript and efficient server interactions. [ more ]

Raymondcamden

Responding to HTML Changes in a Web Component

MutationObserver is used to recognize and respond to changes in DOM elements in web components.

Web components allow for encapsulated functionality within custom HTML elements. [ more ]

Zach Leatherman

6 months ago

An Attempted Taxonomy of Web Components-zachleat.com

Building web components is an evolving process that often involves refactoring older components.

HTML web components can be categorized into three types: those that enhance interactivity, those that augment nested HTML, and those that dynamically customize HTML for specific user agents. [ more ]

Aaadaaam

6 months ago

Step into the light (DOM) | Adam Stoddard

Custom elements in web components can be used without the complexity of shadow DOM and templates.

Custom elements provide the ability to manage themselves and enforce good JavaScript patterns.

Custom elements enable progressive enhancement by wrapping standard interactive elements. [ more ]

Rubyflow

2 days ago

Ruby on Rails

Glimmer DSL for Web Ruby Integration with JavaScript Libraries

Glimmer DSL for Web offers Rubyists a productive and intuitive Frontend framework. [ more ]

Jqueryscript

1 month ago

Weekly Web Design & Development News: Collective #548

A diverse range of design and development resources including Javascript libraries, CSS snippets, and web components were highlighted in the article. [ more ]

Jqueryscript

Weekly Web Design & Development News: Collective #539

The carouscroll web component enhances horizontal scrolling containers into carousels and sliders.

Mojo CSS is an atomic CSS framework that generates CSS based on HTML in real-time. [ more ]

Raymondcamden

5 months ago

An Image Dialog Web Component

Web components can enhance regular HTML in the DOM instead of replacing it with the Shadow DOM.

The web platform has a 'dialog' tag that can be used to build web components for displaying images in a thumbnail and detail view. [ more ]

Southleft, LLC

The Value of Design Tokens in Modern Web Development | Southleft, LLC

Design tokens ensure consistency in design elements like colors, spacing, and typography.

Maintainability is enhanced as design changes can be applied globally with design tokens. [ more ]

Gomakethings

5 months ago

The elevator pitch for Web Components

Web Components provide scoping and instantiation for free.

Web Components have built-in methods for detecting changes and attributes on elements.

Options and configurations for Web Components are declarative in HTML, making them easier to author and use. [ more ]

The New Stack

React

Introduction to Web Components and How to Start Using Them

Web components provide a way to create reusable and customizable UI elements.

Defining your own web components allows you to bring consistency and efficiency to your organization's component library. [ more ]

Jim-nielsen

6 months ago